<?php

use Sc\Util\HtmlStructure\Html\Html;
use Sc\Util\HtmlStructure\Html\Js\VueComponents\Temporary;

Html::create("Demo");
Html::loadThemeResource('ElementUI');

Html::css()->addCss(<<<CSS
.el-anchor {
  width: 200px;
  position: fixed;
  top: 100px;
  left: 0;
  border-right: 1px solid #eee;
  text-align: right;
  padding: 0 20px;
  box-sizing: border-box;
}
#box {
margin-left: 250px;
}
CSS);

$data = [
    ['title' => '基础表格', 'file' => __DIR__ . '/demo1.php'],
    ['title' => '表格基础事件', 'file' => __DIR__ . '/demo2.php'],
    ['title' => '表格异步请求操作', 'file' => __DIR__ . '/demo3.php'],
    ['title' => '直接给定表格数据', 'file' => __DIR__ . '/demo4.php'],
    ['title' => '树形表格', 'file' => __DIR__ . '/demo5.php', 'content' => '数据字段包含children,同时设置表格属性row-key,就会自动识别为树形表格'],
    ['title' => '数据自定义展示', 'file' => __DIR__ . '/demo6.php', 'content' => '可使用 setFormat, showMapping, showTags 等方法实现自定义展示内容'],
    ['title' => '表格搜索', 'file' => __DIR__ . '/demo7.php', 'content' => '使用 addSearch 方法添加搜索, 如果搜索字段不在展示列表，也可以使用表格的 addSearch 方法'],
    ['title' => '表格搜索2-状态型', 'file' => __DIR__ . '/demo8.php', 'content' => '使用 addStatusToggleButtons 方法添加状态切换按钮'],
    ['title' => '表格搜索3-带标题状态型', 'file' => __DIR__ . '/demo9.php', 'content' => '使用 addStatusToggleButtons 方法添加状态切换按钮'],
    ['title' => '表格导出', 'file' => __DIR__ . '/demo10.php', 'content' => '使用 openExportExcel 方法添加导出表格操作，导出数据和搜索表单绑定（未选择时），如果已选择数据，则导出已选择的数据'],
    ['title' => '表单', 'file' => __DIR__ . '/demo11.php'],
    ['title' => '表单-文本输入型', 'file' => __DIR__ . '/demo12.php'],
    ['title' => '表单-选项型', 'file' => __DIR__ . '/demo13.php'],
    ['title' => '表单-上传型', 'file' => __DIR__ . '/demo14.php'],
    ['title' => '表单-组合型', 'file' => __DIR__ . '/demo15.php'],
    ['title' => '表单-条件展示型', 'file' => __DIR__ . '/demo16.php'],
];




$anchor = h('el-anchor')->append(
    ...array_map(function ($item) {
        return h('el-anchor-link', ['href' => "#" . basename($item['file'], '.php'), 'title' => $item['title']]);
    }, $data),
)->append(
    h('el-anchor-link', ['href' => "#end", 'title' => "其他说明"])
);


$demoBox = h('div', ['id' => 'box'])->append(
    ...array_map(function ($item) {
        $id = basename($item['file'], '.php');
        return  h('el-card')->setStyle('{margin-bottom: 10px}')->append(
            h('h3', $item['title'], ['id' => $id]),
            h('el-text', $item['content'] ?? ''),
            h('el-tabs', ['v-model' => Html::js()->vue->bind("{$id}tab", "{$id}res")])->append(
                h('el-tab-pane', ['label' => '效果', 'name' => "{$id}res"])->append(include $item['file']),
                h('el-tab-pane', ['label' => '代码', 'name' => "{$id}code", 'style' => 'background: #f5f5f5;padding: 10px;font-family: var(--el-font-family);'])->append(
                    strtr(highlight_file($item['file'], true), ['&nbsp;&nbsp;' => '&nbsp;', '{{' => '{​{']),
                ),
            )
        );
    }, $data),
)->append(
    h('el-card')->setStyle('{margin-bottom: 10px}')->append(
        h('h3', '其他说明', ['id' => 'end']),
        h('div', '1、里面的表格组件和表单组件都是基于elementPlus的，更加定制化请自行查看elementPlus的文档'),
        h('div', '2、示例仅仅测试了部分功能，更多功能请在使用中多多测试，比如表格行的拖拽，表单远程搜索，回收站，弹窗挂载操作等等。'),
        h('div', '3、表格页面增加的操作按钮，全部都是适配权限控制的，只要路由里面配置之后，就会自动判断是否显示'),
        h('div', '4、https://gitee.com/chenlong_sd'),
    )
);

return h([
    $anchor,
    $demoBox,
]);